<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Alert 警告 | Vue DevUI</title>
    <meta name="description" content="Vue DevUI 组件库">
    <link rel="stylesheet" href="/assets/style.b884dd64.css">
    <link rel="modulepreload" href="/assets/Home.e734a50d.js">
    <link rel="modulepreload" href="/assets/AlgoliaSearchBox.e66f60b3.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="modulepreload" href="/assets/components_alert_index.md.c7702e03.lean.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
    <meta name="twitter:title" content="Alert 警告 | Vue DevUI">
    <meta property="og:title" content="Alert 警告 | Vue DevUI">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-4bb0db66><div class="nav-bar-inner" data-v-4bb0db66><div class="sidebar-button" data-v-4bb0db66><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" aria-label="Vue DevUI, back to home" data-v-4bb0db66 data-v-4d0f7fcc><img class="logo" src="/../../assets/logo.svg" alt="Logo" data-v-4d0f7fcc><span data-v-4d0f7fcc>Vue DevUI</span></a><!--[--><!--[--><div id="docsearch" multilang="false"></div><!--]--><!--]--><div class="flex-grow" data-v-4bb0db66></div><div class="flex items-center" data-v-4bb0db66><div class="nav" data-v-4bb0db66><nav class="nav-links" data-v-4bb0db66 data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav></div><div class="custom-nav flex items-center ml-l" data-v-4bb0db66><!----><!----><div class="custom-nav-item flex items-center ml-m" data-v-4bb0db66><!--[--><span class="devui-popper-trigger"><svg class="icon-theme" viewbox="0 0 1024 1024" width="16" height="16" data-v-6fec2a10><path fill="var(--devui-text)" d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z" data-v-6fec2a10></path></svg></span><!--teleport start--><!--teleport end--><!--]--></div><a class="custom-nav-item ml-m" style="font-size:0;user-select:none;" href="https://github.com/DevCloudFE/vue-devui" target="_blank" data-v-4bb0db66><svg viewBox="0 0 20 20" width="18" height="18" data-v-4bb0db66><path fill="var(--devui-text, #252b3a)" d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0" data-v-4bb0db66></path></svg></a></div></div></div></header><aside class="sidebar" data-v-06a2164a><nav class="nav-links nav" data-v-06a2164a data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-06a2164a><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/quick-start/"><!----><span class="sidebar-link-text">快速开始<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/on-demand/"><!----><span class="sidebar-link-text">按需引入<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/theme-guide/"><!----><span class="sidebar-link-text">主题定制<!----></span></a><!----></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">通用<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/button/"><!----><span class="sidebar-link-text">Button 按钮<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/fullscreen/"><!----><span class="sidebar-link-text">Fullscreen 全屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/icon/"><!----><span class="sidebar-link-text">Icon 图标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/overlay/"><!----><span class="sidebar-link-text">Overlay 遮罩层<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/panel/"><!----><span class="sidebar-link-text">Panel 面板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/ripple/"><!----><span class="sidebar-link-text">Ripple 水波纹<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/search/"><!----><span class="sidebar-link-text">Search 搜索框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/status/"><!----><span class="sidebar-link-text">Status 状态<!----></span></a><!----></li><!----><!----></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">导航<!----></span></p><ul class="sidebar-links"><!----><!----><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/dropdown/"><!----><span class="sidebar-link-text">Dropdown 下拉菜单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/menu/"><!----><span class="sidebar-link-text">Menu 菜单<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/pagination/"><!----><span class="sidebar-link-text">Pagination 分页<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tabs/"><!----><span class="sidebar-link-text">Tabs 选项卡<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">反馈<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="/components/alert/"><!----><span class="sidebar-link-text">Alert 警告<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/drawer/"><!----><span class="sidebar-link-text">Drawer 抽屉板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/loading/"><!----><span class="sidebar-link-text">Loading 加载提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/message/"><!----><span class="sidebar-link-text">Message 全局提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/modal/"><!----><span class="sidebar-link-text">Modal 弹窗<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/notification/"><!----><span class="sidebar-link-text">Notification 全局通知<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/popover/"><!----><span class="sidebar-link-text">Popover 悬浮提示<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/result/"><!----><span class="sidebar-link-text">Result 结果<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tooltip/"><!----><span class="sidebar-link-text">Tooltip 提示<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据录入<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/auto-complete/"><!----><span class="sidebar-link-text">AutoComplete 自动补全<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/checkbox/"><!----><span class="sidebar-link-text">Checkbox 复选框<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/date-picker-pro/"><!----><span class="sidebar-link-text">DatePickerPro 日期选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/editable-select/"><!----><span class="sidebar-link-text">EditableSelect 可输入下拉选择框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/form/"><!----><span class="sidebar-link-text">Form 表单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input/"><!----><span class="sidebar-link-text">Input 输入框<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input-number/"><!----><span class="sidebar-link-text">InputNumber 数字输入框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/mention/"><!----><span class="sidebar-link-text">Mention 提及<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/radio/"><!----><span class="sidebar-link-text">Radio 单选框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/select/"><!----><span class="sidebar-link-text">Select 下拉框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/slider/"><!----><span class="sidebar-link-text">Slider 滑块<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/switch/"><!----><span class="sidebar-link-text">Switch 开关<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/textarea/"><!----><span class="sidebar-link-text">Textarea 多行文本框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-picker/"><!----><span class="sidebar-link-text">TimePicker 时间选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-select/"><!----><span class="sidebar-link-text">TimeSelect 时间选择器<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/upload/"><!----><span class="sidebar-link-text">Upload 上传<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据展示<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/avatar/"><!----><span class="sidebar-link-text">Avatar 头像<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/badge/"><!----><span class="sidebar-link-text">Badge 徽标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/card/"><!----><span class="sidebar-link-text">Card 卡片<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/collapse/"><!----><span class="sidebar-link-text">Collapse 折叠面板<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/countdown/"><!----><span class="sidebar-link-text">Countdown 倒计时<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/image-preview/"><!----><span class="sidebar-link-text">ImagePreview 图片预览<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/progress/"><!----><span class="sidebar-link-text">Progress 进度条<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/rate/"><!----><span class="sidebar-link-text">Rate 评分<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/skeleton/"><!----><span class="sidebar-link-text">Skeleton 骨架屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/statistic/"><!----><span class="sidebar-link-text">Statistic 统计数值<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/steps/"><!----><span class="sidebar-link-text">Steps 步骤条<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/table/"><!----><span class="sidebar-link-text">Table 表格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tag/"><!----><span class="sidebar-link-text">Tag 标签<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/timeline/"><!----><span class="sidebar-link-text">Timeline 时间轴<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tree/"><!----><span class="sidebar-link-text">Tree 树<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">布局<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/grid/"><!----><span class="sidebar-link-text">Grid 栅格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/layout/"><!----><span class="sidebar-link-text">Layout 布局<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/splitter/"><!----><span class="sidebar-link-text">Splitter 分割器<!----></span></a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-35e0cb6b><div class="container" data-v-35e0cb6b><!--[--><!--]--><div style="position:relative;" class="content" data-v-35e0cb6b><div><h1 id="alert-警告" tabindex="-1">Alert 警告 <a class="header-anchor" href="#alert-警告" aria-hidden="true">#</a></h1><p>显示警告信息，需要用户关注的信息的组件。</p><h4 id="何时使用" tabindex="-1">何时使用 <a class="header-anchor" href="#何时使用" aria-hidden="true">#</a></h4><p>当页面需要向用户发出警告信息时。</p><h3 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-hidden="true">#</a></h3><p>共有四种样式：success、danger、warning、info。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div><div class="devui-alert devui-alert--success mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--success"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path fill-rule="nonzero" d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"></path><polygon stroke-width="0.3" fill-rule="nonzero" points="6.82767602 11.5282799 3 7.24668779 3.89864233 6.37912367 6.82767602 9.04910002 12.2964408 4 13 4.64144383"></polygon></g></svg></span><div class="devui-alert__content"><span><!--[-->success<!--]--></span><!----></div></div><div class="devui-alert devui-alert--danger mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--error"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path class="error-outer" d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"></path><path class="error-inner" d="M9,10.6 L9,12.6 L7,12.6 L7,10.6 L9,10.6 Z M9.1,3.1 L8.65924344,9.1 L7.28422786,9.1 L6.9,3.1 L9.1,3.1 Z" stroke-width="0.2"></path></g></g></svg></span><div class="devui-alert__content"><span><!--[-->danger<!--]--></span><!----></div></div><div class="devui-alert devui-alert--warning mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--warning"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path class="warning-outer" d="M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117               15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15               14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873               0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229               C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589               C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"></path><path class="warning-inner" stroke-width="0.3" fill-rule="nonzero" d="M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263               L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5               L8.96842105,4.5 L8.62102372,9.86842105 Z"></path></g></svg></span><div class="devui-alert__content"><span><!--[-->warning<!--]--></span><!----></div></div><div class="devui-alert devui-alert--info mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--info"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path class="info-outer" d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"></path><path class="info-inner" d="M9.19008504,7 L8.79402696,13 L7.15622605,13 L6.73158434,7 L9.19008504,7 Z M9,3 L9,5 L7,5 L7,3 L9,3 Z" stroke-width="0.2"></path></g></g></svg></span><div class="devui-alert__content"><span><!--[-->info<!--]--></span><!----></div></div><div class="devui-alert devui-alert--simple mb-2"><!----><div class="devui-alert__content"><span><!--[-->simple<!--]--></span><!----></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:closeable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:closeable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:closeable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:closeable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>simple<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:closeable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>simple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="可关闭的提示" tabindex="-1">可关闭的提示 <a class="header-anchor" href="#可关闭的提示" aria-hidden="true">#</a></h3><p>显示关闭按钮，点击可关闭提示。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div><div class="devui-alert devui-alert--success mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--success"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path fill-rule="nonzero" d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"></path><polygon stroke-width="0.3" fill-rule="nonzero" points="6.82767602 11.5282799 3 7.24668779 3.89864233 6.37912367 6.82767602 9.04910002 12.2964408 4 13 4.64144383"></polygon></g></svg></span><div class="devui-alert__content"><span><!--[-->success<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--danger mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--error"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path class="error-outer" d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"></path><path class="error-inner" d="M9,10.6 L9,12.6 L7,12.6 L7,10.6 L9,10.6 Z M9.1,3.1 L8.65924344,9.1 L7.28422786,9.1 L6.9,3.1 L9.1,3.1 Z" stroke-width="0.2"></path></g></g></svg></span><div class="devui-alert__content"><span><!--[-->danger<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--warning mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--warning"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path class="warning-outer" d="M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117               15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15               14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873               0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229               C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589               C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"></path><path class="warning-inner" stroke-width="0.3" fill-rule="nonzero" d="M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263               L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5               L8.96842105,4.5 L8.62102372,9.86842105 Z"></path></g></svg></span><div class="devui-alert__content"><span><!--[-->warning<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--info mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--info"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path class="info-outer" d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"></path><path class="info-inner" d="M9.19008504,7 L8.79402696,13 L7.15622605,13 L6.73158434,7 L9.19008504,7 Z M9,3 L9,5 L7,5 L7,3 L9,3 Z" stroke-width="0.2"></path></g></g></svg></span><div class="devui-alert__content"><span><!--[-->info<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--simple mb-2"><!----><div class="devui-alert__content"><span><!--[-->simple<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleClose<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleClose<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleClose<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleClose<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>simple<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleClose<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>simple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token function-variable function">handleClose</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">$event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>$event<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      handleClose<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="不使用默认图标" tabindex="-1">不使用默认图标 <a class="header-anchor" href="#不使用默认图标" aria-hidden="true">#</a></h3><p>不使用默认的类型图标。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div><div class="devui-alert devui-alert--success mb-2"><!----><div class="devui-alert__content"><span><!--[-->success<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--danger mb-2"><!----><div class="devui-alert__content"><span><!--[-->danger<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--warning mb-2"><!----><div class="devui-alert__content"><span><!--[-->warning<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--info mb-2"><!----><div class="devui-alert__content"><span><!--[-->info<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--simple mb-2"><!----><div class="devui-alert__content"><span><!--[-->simple<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:show-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:show-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:show-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:show-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>simple<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:show-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>simple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="文字居中" tabindex="-1">文字居中 <a class="header-anchor" href="#文字居中" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div><div class="devui-alert devui-alert--success devui-alert--center mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--success"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path fill-rule="nonzero" d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"></path><polygon stroke-width="0.3" fill-rule="nonzero" points="6.82767602 11.5282799 3 7.24668779 3.89864233 6.37912367 6.82767602 9.04910002 12.2964408 4 13 4.64144383"></polygon></g></svg></span><div class="devui-alert__content"><span><!--[-->success<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--danger devui-alert--center mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--error"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path class="error-outer" d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"></path><path class="error-inner" d="M9,10.6 L9,12.6 L7,12.6 L7,10.6 L9,10.6 Z M9.1,3.1 L8.65924344,9.1 L7.28422786,9.1 L6.9,3.1 L9.1,3.1 Z" stroke-width="0.2"></path></g></g></svg></span><div class="devui-alert__content"><span><!--[-->danger<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--warning devui-alert--center mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--warning"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path class="warning-outer" d="M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117               15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15               14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873               0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229               C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589               C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"></path><path class="warning-inner" stroke-width="0.3" fill-rule="nonzero" d="M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263               L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5               L8.96842105,4.5 L8.62102372,9.86842105 Z"></path></g></svg></span><div class="devui-alert__content"><span><!--[-->warning<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--info devui-alert--center mb-2"><span class="devui-alert__icon-wrap"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-alert__icon devui-alert__icon--info"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path class="info-outer" d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"></path><path class="info-inner" d="M9.19008504,7 L8.79402696,13 L7.15622605,13 L6.73158434,7 L9.19008504,7 Z M9,3 L9,5 L7,5 L7,3 L9,3 Z" stroke-width="0.2"></path></g></g></svg></span><div class="devui-alert__content"><span><!--[-->info<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div><div class="devui-alert devui-alert--simple devui-alert--center mb-2"><!----><div class="devui-alert__content"><span><!--[-->simple<!--]--></span><div class="devui-alert__close-icon"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></div></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span> <span class="token attr-name">center</span><span class="token punctuation">&gt;</span></span>success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">center</span><span class="token punctuation">&gt;</span></span>danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">center</span><span class="token punctuation">&gt;</span></span>warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">center</span><span class="token punctuation">&gt;</span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-alert</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>simple<span class="token punctuation">&quot;</span></span> <span class="token attr-name">center</span><span class="token punctuation">&gt;</span></span>simple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-alert</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="alert-参数" tabindex="-1">Alert 参数 <a class="header-anchor" href="#alert-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">type</td><td style="text-align:left;"><a href="#alerttype">AlertType</a></td><td style="text-align:left;">&#39;info&#39;</td><td style="text-align:left;">必选，指定警告提示的样式</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">css-class</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，自定义 class 名</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">closeable</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，默认显示关闭按钮</td><td style="text-align:left;"><a href="#%E5%8F%AF%E5%85%B3%E9%97%AD%E7%9A%84%E6%8F%90%E7%A4%BA">基本用法</a></td></tr><tr><td style="text-align:left;">dismiss-time</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，自动关闭 alert 的延迟时间（<code>ms</code>）</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">show-icon</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，是否使用默认的类型图标</td><td style="text-align:left;"><a href="#%E4%B8%8D%E4%BD%BF%E7%94%A8%E9%BB%98%E8%AE%A4%E5%9B%BE%E6%A0%87">不使用默认图标</a></td></tr><tr><td style="text-align:left;">center</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否使文字居中显示</td><td style="text-align:left;"><a href="#%E6%96%87%E5%AD%97%E5%B1%85%E4%B8%AD">文字居中</a></td></tr></tbody></table><h3 id="alert-事件" tabindex="-1">Alert 事件 <a class="header-anchor" href="#alert-事件" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">事件名</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">close</td><td style="text-align:left;"><code>(event?: MouseEvent) =&gt; void</code></td><td style="text-align:left;">可选，关闭时触发的回调函数</td><td style="text-align:left;"><a href="#%E5%8F%AF%E5%85%B3%E9%97%AD%E7%9A%84%E6%8F%90%E7%A4%BA">可关闭的提示</a></td></tr></tbody></table><h3 id="alert-类型定义" tabindex="-1">Alert 类型定义 <a class="header-anchor" href="#alert-类型定义" aria-hidden="true">#</a></h3><h4 id="alerttype" tabindex="-1">AlertType <a class="header-anchor" href="#alerttype" aria-hidden="true">#</a></h4><p>默认值为&#39;info&#39;， 指定 alert 警告提示的类型</p><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">AlertType</span> <span class="token operator">=</span> <span class="token string">&#39;success&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;danger&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;warning&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;info&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;simple&#39;</span><span class="token punctuation">;</span>
</code></pre></div></div></div><div data-v-35e0cb6b><div class="page-contributor-label" data-v-35e0cb6b>Contributors</div><div class="page-contributor" data-v-35e0cb6b data-v-36223ac2><!--[--><a href="https://github.com/chressYu" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/91681351?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/liuxdi" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/10958003?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/daviForevel" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/39021499?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/Lonely-shang" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/34124930?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/linxiang07" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/40119767?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/GeorgeLeoo" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/48482395?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><!--]--></div></div><footer class="page-footer" data-v-35e0cb6b data-v-63a8fcc6><div class="edit" data-v-63a8fcc6><div class="edit-link" data-v-63a8fcc6 data-v-084d37fe><!----></div></div><div class="updated" data-v-63a8fcc6><!----></div></footer><div class="next-and-prev-link" data-v-35e0cb6b data-v-1443c067><div class="container" data-v-1443c067><div class="prev" data-v-1443c067><a class="link" href="/components/tabs/" data-v-1443c067><svg t="1637469990202" class="icon icon icon-prev" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5081" width="16" height="16" data-v-1443c067><path d="M277.92 512.064c0 8.128 3.072 16.224 9.28 22.4l362.336 362.336a31.808 31.808 0 0 0 45.12-0.128 31.904 31.904 0 0 0 0.128-45.12L355.2 512 694.72 172.448a31.808 31.808 0 0 0-0.128-45.12 31.904 31.904 0 0 0-45.12-0.128L287.232 489.536a31.616 31.616 0 0 0-9.312 22.4l0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="5082"></path></svg><span class="text" data-v-1443c067>Tabs 选项卡</span></a></div><div class="next" data-v-1443c067><a class="link" href="/components/drawer/" data-v-1443c067><span class="text" data-v-1443c067>Drawer 抽屉板</span><svg t="1637469947735" class="icon icon icon-next" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4917" width="16" height="16" data-v-1443c067><path d="M746.08 512.064a31.584 31.584 0 0 1-9.28 22.4L374.464 896.8a31.808 31.808 0 0 1-45.12-0.128 31.904 31.904 0 0 1-0.128-45.12L668.8 512 329.28 172.448a31.808 31.808 0 0 1 0.128-45.12 31.904 31.904 0 0 1 45.12-0.128l362.304 362.336c6.208 6.176 9.28 14.272 9.312 22.4l-0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="4918"></path></svg></a></div></div></div><!--[--><!--]--><!----><aside class="toc-warpper" data-v-35e0cb6b data-v-38776bfe><nav class="devui-content-nav" data-v-38776bfe><h3 class="devui-fast-forward" data-v-38776bfe>快速前往</h3><ul class="devui-step-nav" data-v-38776bfe><!--[--><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#基本用法" title="基本用法" data-v-38776bfe>基本用法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#可关闭的提示" title="可关闭的提示" data-v-38776bfe>可关闭的提示</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#不使用默认图标" title="不使用默认图标" data-v-38776bfe>不使用默认图标</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#文字居中" title="文字居中" data-v-38776bfe>文字居中</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#alert-参数" title="Alert 参数" data-v-38776bfe>Alert 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#alert-事件" title="Alert 事件" data-v-38776bfe>Alert 事件</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#alert-类型定义" title="Alert 类型定义" data-v-38776bfe>Alert 类型定义</a></li><!--]--></ul><div class="devui-marker" data-v-38776bfe></div></nav></aside></div></main></div><!----><!----><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_accordion_index.md\":\"a92e3443\",\"components_alert_index.md\":\"c7702e03\",\"components_anchor_index.md\":\"f7333cbb\",\"components_auto-complete_index.md\":\"4de98e8d\",\"components_avatar_index.md\":\"69aa04d5\",\"components_back-top_index.md\":\"d1ab787c\",\"components_badge_index.md\":\"e4750848\",\"components_breadcrumb_index.md\":\"c976c02b\",\"components_button_index.md\":\"5ad2976d\",\"components_card_index.md\":\"07ffbefa\",\"components_carousel_index.md\":\"f88f0b13\",\"components_cascader_index.md\":\"ee34cce7\",\"components_checkbox_index.md\":\"3ec7d7a1\",\"components_collapse_index.md\":\"9f2cbd98\",\"components_color-picker_index.md\":\"76658b37\",\"components_comment_index.md\":\"7f6ae658\",\"components_countdown_index.md\":\"556b68b1\",\"components_date-picker-pro_index.md\":\"a354c050\",\"components_date-picker_index.md\":\"00801143\",\"components_dragdrop_index.md\":\"27ca48b1\",\"components_drawer_index.md\":\"f1f95db0\",\"components_dropdown_index.md\":\"2e85d37e\",\"components_editable-select_index.md\":\"dfceeabe\",\"components_form_index.md\":\"aa7415f4\",\"components_fullscreen_index.md\":\"91a2fd77\",\"components_gantt_index.md\":\"c7536435\",\"components_grid_index.md\":\"646531b7\",\"components_icon_index.md\":\"b13a05fb\",\"components_image-preview_index.md\":\"6064aa0f\",\"components_input-icon_index.md\":\"03605b44\",\"components_input-number_index.md\":\"75cb181b\",\"components_input_index.md\":\"399db2a5\",\"components_layout_index.md\":\"bd89a2a7\",\"components_list_index.md\":\"398a7889\",\"components_loading_index.md\":\"86c25c88\",\"components_mention_index.md\":\"4e5fcead\",\"components_menu_index.md\":\"5e7b2a2a\",\"components_message_index.md\":\"288b49b1\",\"components_modal_index.md\":\"6d985802\",\"components_multi-auto-complete_index.md\":\"d7dd7812\",\"components_nav-sprite_index.md\":\"59326b1c\",\"components_notification_index.md\":\"17d66bf4\",\"components_overlay_index.md\":\"b3c2d8b1\",\"components_overview_index.md\":\"4f4893a2\",\"components_pagination_index.md\":\"fa43e1ee\",\"components_panel_index.md\":\"78140495\",\"components_popover_index.md\":\"e061fad6\",\"components_progress_index.md\":\"f99bb298\",\"components_quadrant-diagram_index.md\":\"5b863b4f\",\"components_radio_index.md\":\"1569e619\",\"components_rate_index.md\":\"8ed5b018\",\"components_read-tip_index.md\":\"65f3a3e8\",\"components_result_index.md\":\"5a0e2c71\",\"components_ripple_index.md\":\"e22eb85c\",\"components_search_index.md\":\"a6ca9673\",\"components_select_index.md\":\"14f5b72d\",\"components_skeleton_index.md\":\"87cfbcd2\",\"components_slider_index.md\":\"c3e69a49\",\"components_splitter_index.md\":\"7b49b977\",\"components_statistic_index.md\":\"699289db\",\"components_status_index.md\":\"9b3ee9c1\",\"components_steps-guide_index.md\":\"4d707f63\",\"components_steps_index.md\":\"75686d75\",\"components_sticky_index.md\":\"839717a7\",\"components_switch_index.md\":\"05eb9888\",\"components_table_index.md\":\"1b34dab5\",\"components_tabs_index.md\":\"2612fccc\",\"components_tag-input_index.md\":\"d6c90326\",\"components_tag_index.md\":\"9d46f105\",\"components_textarea_index.md\":\"f6a86e66\",\"components_time-picker_index.md\":\"f8cff83c\",\"components_time-select_index.md\":\"38dfaf50\",\"components_timeline_index.md\":\"9b7ebcb4\",\"components_tooltip_index.md\":\"f9f4b384\",\"components_transfer_index.md\":\"7005ca26\",\"components_tree-select_index.md\":\"d122e78e\",\"components_tree_index.md\":\"2611f2c7\",\"components_upload_index.md\":\"65171bcd\",\"components_virtual-list_index.md\":\"6c90a3dd\",\"contributing_development-specification_api-demo-design_index.md\":\"fc9f2d3e\",\"contributing_development-specification_coding-specification_index.md\":\"af51d196\",\"contributing_development-specification_component-document_index.md\":\"a849b30c\",\"contributing_development-specification_directory-organization_index.md\":\"58197a6f\",\"contributing_development-specification_index.md\":\"1df9cfa5\",\"contributing_index.md\":\"7660b0ff\",\"en-us_components_alert_index.md\":\"96d493c1\",\"en-us_components_auto-complete_api-en.md\":\"004a35e9\",\"en-us_components_avatar_index.md\":\"dbe38f1a\",\"en-us_components_badge_index.md\":\"e48f2672\",\"en-us_components_button_index.md\":\"ec772540\",\"en-us_components_carousel_index.md\":\"3fec7a3f\",\"en-us_components_color-picker_index.md\":\"9fe5a01c\",\"en-us_components_comment_index.md\":\"2a0696ba\",\"en-us_components_editable-select_index.md\":\"73d1175f\",\"en-us_components_form_index.md\":\"65caae2d\",\"en-us_components_input_index.md\":\"136ae80e\",\"en-us_components_menu_index.md\":\"0bb24150\",\"en-us_components_message_index.md\":\"3fa5c7c8\",\"en-us_components_modal_index.md\":\"736ef31f\",\"en-us_components_panel_index.md\":\"4a1db166\",\"en-us_components_popover_index.md\":\"6b07f22f\",\"en-us_components_progress_index.md\":\"b364f914\",\"en-us_components_radio_index.md\":\"bddcefa7\",\"en-us_components_rate_index.md\":\"3940452b\",\"en-us_components_read-tip_index.md\":\"56a74b67\",\"en-us_components_result_index.md\":\"369abc51\",\"en-us_components_ripple_index.md\":\"b6d519cb\",\"en-us_components_search_index.md\":\"8745e3f6\",\"en-us_components_skeleton_index.md\":\"73d6ba05\",\"en-us_components_slider_index.md\":\"d6b0ecd3\",\"en-us_components_splitter_index.md\":\"ae397e5b\",\"en-us_components_statistic_index.md\":\"6f27cda4\",\"en-us_components_status_index.md\":\"e80d4793\",\"en-us_components_tag_index.md\":\"2388e235\",\"en-us_components_tooltip_index.md\":\"6013670f\",\"en-us_index.md\":\"45997edd\",\"en-us_quick-start_index.md\":\"5cb0ca76\",\"index.md\":\"d8afff32\",\"on-demand_index.md\":\"cc889f91\",\"quick-start_index.md\":\"2f52f012\",\"theme-guide_index.md\":\"4b58afef\"}")</script>
    <script type="module" async src="/assets/app.43ba01c1.js"></script>
    
  </body>
</html>